<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import AppSidebar from './AppSidebar.vue'
import AppHeader from './AppHeader.vue'

const router = useRouter()
const sidebarRef = ref(null)

const handleLogout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('username')
  router.push('/login')
}
</script>

<template>
  <el-container class="app-layout">
    <!-- 侧边栏 -->
    <AppSidebar ref="sidebarRef" />
    
    <el-container class="main-container">
      <!-- 顶部导航栏 -->
      <AppHeader @logout="handleLogout" />
      
      <!-- 主要内容区域 -->
      <el-main class="main-content">
        <slot></slot>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.app-layout {
  width: 100%;
  height: 100%;
}

/* 主容器样式 */
.main-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 主要内容区域样式 */
.main-content {
  flex: 1;
  background-color: #f5f7fa;
  padding: 20px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
</style>